<template>
  <div class="listItem">
      <div class="itemImg">
        <img :src="courseItem.pack.url" @click="checkDetail(courseItem.pack.id,courseItem.pack.directionname,courseItem.pack.typename)" />
      </div>
      <div class="itemCon">
        <div class="infoCon">
          <div class="conTitle" v-text="courseItem.pack.name" @click="checkDetail(courseItem.pack.id,courseItem.pack.directionname,courseItem.pack.typename)"></div>
          <div class="conDescri">
            <div ref="thisDesc" class="thisDesc" v-text="courseItem.pack.brief" @click="checkDetail(courseItem.pack.id,courseItem.pack.directionname,courseItem.pack.typename)">
            </div>
          </div>
        </div>
        <div class="itemRest">
          <div class="conTime">
            <span>总</span><span class="courseSum" v-text="courseItem.pack.allTimes"></span><span>课时</span>
          </div>
          <div class="itemBtn">
            <div class="btnCheck" id="ckdetail" onclick="_hmt.push(['_trackEvent', 'querydetail', 'click', 'ckdetail'])" @click="checkDetail(courseItem.pack.id,courseItem.pack.directionname,courseItem.pack.typename)">查看详情</div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
import Clamp from "plus/clamp"

export default {
  name: 'course-list',
  props: {
    courseItem: {
      type: Object,
      default: new Object()
    },
    from: {
      type: String,
      // default: 0
    }
  },
  methods: {
    checkDetail(id, directionName, typeName) {
      this.$router.push({
        path: '/courseDetail',
        query: {
          detailId: id,
          from: this.from,
          direc: directionName,
          type: typeName
        }
      })
    }
  },
  mounted(){
    Clamp(this.$refs.thisDesc,{clamp:3});
  }
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~style/base.styl';

.courseList {
  @extend .sWidth;
  margin-top: 20px;
  margin-bottom: 100px;
}

.listItem {
  background: $color-text;
  height: 202px;
  width: 100%;
  margin-bottom: 30px;
  position: relative;

  /* Opera */
  div {
    vertical-align: top;
  }

  @extend .borderBox;
}

.itemImg {
  display: inline-block;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99;

  img {
    height: 172px;
    width: 266px;
    cursor: pointer;
  }
}

.itemCon {
  position: absolute;
  top: 30px;
  left: 30px;
  bottom: 0px;
  right: 0px;
  background: $color-person-bg;
  padding: 30px 0px 0px 266px;

  .infoCon {
    position: absolute;
    right: 206px;
    width: 698px;

    .conTitle {
      white-space: nowrap;
      text-overflow:ellipsis;
      overflow:hidden;
      font-weight: bold;
      font-size: $font-size-large-l;
      color: $color-course-title;
      line-height: $font-size-medium-x * 2;
      cursor: pointer;
      margin-bottom: 14px;
    }

    .conDescri {
      height: ($font-size-large * 3);
      width: 100%;

      .thisDesc {
        font-size: $font-size-medium;
        line-height: ($font-size-medium-x * 1.5);
        color: $color-text-l;
        cursor: pointer;
        ellipsis(3);
      }
    }
  }

  .itemRest {
    position: absolute;
    right: 0px;
    height: 142px;
    text-align: center;
    width: 176px;

    .conTime {
      font-size: $font-size-medium;
      color: $color-text-ll;
      margin-top: 5px;
      line-height: $font-size-small;

      .courseSum {
        font-size: $font-size-large-l;
        color: $color-theme;
      }
    }

    .itemBtn {
      margin-top: 60px;

      .btnCheck {
        @extend .basicBtn;
        background: $color-theme;
        cursor: pointer;
        color: $color-text;
        font-size: $font-size-medium;

        &:hover {
          background: $color-background-more;
        }
      }
    }
  }
}
</style>

